<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>spirit8</title>
    <link rel="stylesheet" href="/css/bootstrap.min.css">

    <link rel="stylesheet" href="/css/swiper-bundle.min.css">

    <!-- 重置样式 -->
    <link rel="stylesheet/less" href="/css/reset.less">

    <!-- 公共样式 -->
    <link rel="stylesheet/less" href="/css/common.less">

    <!-- 独立样式 -->
    <link rel="stylesheet/less" href="/css/index.less">
</head>

<body>
    <div class="warp">
        <!-- 导航条最大的盒子 -->
        <nav class="navbar navbar-inverse nav-bg">
            <!-- 用于logo和导航处于中间 -->
            <div class="container">
                <!-- logo和移动端时候所显示的导航按钮 -->
                <div class="navbar-header">
                    <!-- 移动端时候所显示的导航按钮 -->
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                        data-target="#bs-example-n  avbar-collapse-1" aria-expanded="false">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <!-- logo -->
                    <a class="navbar-brand logo" href="#">spirit8</a>
                </div>

                <!-- Collect the nav links, forms, and other content for toggling -->
                <div class="collapse navbar-collapse " id="bs-example-navbar-collapse-1">
                    <ul class="nav navbar-nav navbar-right">
                        <li><a href="#banner">HOME</a></li>
                        <li><a href="#about">ABOUT</a></li>
                        <li><a href="#team">TEAM</a></li>
                        <li><a href="#services">SERVICES</a></li>
                        <li><a href="#clients">CLIENTS</a></li>
                        <li><a href="#work">WORK</a></li>

                    </ul>
                </div><!-- /.navbar-collapse -->
            </div><!-- /.container-fluid -->
        </nav>
        <div id="banner">
            <h3>wELCOME on <span>spirit8</span></h3>
            <p>We are a digital agency with <span>years of experience</span> and with <span>extraordinary people</span>
            </p>
            <div class="anniu">
                <a href="#footer">
                    <img src="./images/images/按钮.png" alt="">
                </a>
            </div>


        </div>
        <div id="about">
            <div class="about-box">
                <div class="left">
                    <img src="./images/电脑_03.png" alt="">
                </div>
                <div class="right">
                    <h6>About us</h6>
                    <h3>Some words <span>about us</span></h3>
                    <div class="line"></div>
                    <div class="content">
                        We love building and rebuilding brands through our specific skills. Using colour, fonts, and
                        illustration, we brand companies in a way they will never forget.
                    </div>


                    <ul>
                        <li>
                            <div class="icon">
                                <img src="./images/images/圆点.png" alt="">
                            </div>
                            <div class="text">Mission - <span>We deliver uniqueness and quality</span></div>
                        </li>

                        <li>
                            <div class="icon">
                                <img src="./images/images/圆点.png" alt="">
                            </div>
                            <div class="text">Skills - <span>Delivering fast and excellent results</span></div>
                        </li>

                        <li>
                            <div class="icon">
                                <img src="./images/images/圆点.png" alt="">
                            </div>
                            <div class="text">Clients - <span>Satisfied clients thanks to our experience</span></div>
                        </li>
                    </ul>

                    <div class="about-btn">
                        <img src="/images/about-btn.png" alt="">
                        Browse our work
                    </div>
                </div>
            </div>
        </div>
        <div id="team">
            <h3>Meet <span>our team</span></h3>
            <div class="line"></div>
            <div class="line2"></div>
            <div class="swiper team-swiper">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">
                        <div class="list">
                            <div class="item">
                                <img src="./images/images/avatar.png" alt="">
                                <div class="nickname">
                                    Jason Statham
                                    <p>Knife designer</p>
                                </div>
                                <div class="content">
                                    Do not seek to change what has come before. Seek to create that which has not.
                                </div>
                            </div>

                            <div class="item">
                                <img src="./images/images/avatar.png" alt="">
                                <div class="nickname">
                                    Van Damme
                                    <p>No English</p>
                                </div>
                                <div class="content">
                                    Do not seek to change what has come before. Seek to create that which has not.
                                </div>
                            </div>

                            <div class="item">
                                <img src="./images/images/avatar.png" alt="">
                                <div class="nickname">
                                    Sylvester Stallone
                                    <p>Cigar Lover</p>
                                </div>
                                <div class="content">
                                    Do not seek to change what has come before. Seek to create that which has not.
                                </div>
                            </div>

                            <div class="item">
                                <img src="./images/images/avatar.png" alt="">
                                <div class="nickname">
                                    Jet Li
                                    <p>I need more money</p>
                                </div>
                                <div class="content">
                                    Do not seek to change what has come before. Seek to create that which has not.
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="swiper-slide">
                        <div class="list">
                            <div class="item">
                                <img src="./images/images/avatar.png" alt="">
                                <div class="nickname">
                                    Jason Statham
                                    <p>Knife designer</p>
                                </div>
                                <div class="content">
                                    Do not seek to change what has come before. Seek to create that which has not.
                                </div>
                            </div>

                            <div class="item">
                                <img src="./images/images/avatar.png" alt="">
                                <div class="nickname">
                                    Jason Statham
                                    <p>Knife designer</p>
                                </div>
                                <div class="content">
                                    Do not seek to change what has come before. Seek to create that which has not.
                                </div>
                            </div>

                            <div class="item">
                                <img src="./images/images/avatar.png" alt="">
                                <div class="nickname">
                                    Jason Statham
                                    <p>Knife designer</p>
                                </div>
                                <div class="content">
                                    Do not seek to change what has come before. Seek to create that which has not.
                                </div>
                            </div>

                            <div class="item">
                                <img src="./images/images/avatar.png" alt="">
                                <div class="nickname">
                                    Jason Statham
                                    <p>Knife designer</p>
                                </div>
                                <div class="content">
                                    Do not seek to change what has come before. Seek to create that which has not.
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="swiper-slide">
                        <div class="list">
                            <div class="item">
                                <img src="./images/images/avatar.png" alt="">
                                <div class="nickname">
                                    Jason Statham
                                    <p>Knife designer</p>
                                </div>
                                <div class="content">
                                    Do not seek to change what has come before. Seek to create that which has not.
                                </div>
                            </div>

                            <div class="item">
                                <img src="./images/images/avatar.png" alt="">
                                <div class="nickname">
                                    Jason Statham
                                    <p>Knife designer</p>
                                </div>
                                <div class="content">
                                    Do not seek to change what has come before. Seek to create that which has not.
                                </div>
                            </div>

                            <div class="item">
                                <img src="./images/images/avatar.png" alt="">
                                <div class="nickname">
                                    Jason Statham
                                    <p>Knife designer</p>
                                </div>
                                <div class="content">
                                    Do not seek to change what has come before. Seek to create that which has not.
                                </div>
                            </div>

                            <div class="item">
                                <img src="./images/images/avatar.png" alt="">
                                <div class="nickname">
                                    Jason Statham
                                    <p>Knife designer</p>
                                </div>
                                <div class="content">
                                    Do not seek to change what has come before. Seek to create that which has not.
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 如果需要分页器 -->
                <div class="swiper-pagination"></div>

                <!-- 如果需要导航按钮 -->
                <!-- <div class="swiper-button-prev"></div>
                <div class="swiper-button-next"></div> -->

                <!-- 如果需要滚动条 -->
                <!-- <div class="swiper-scrollbar"></div> -->
            </div>
        </div>
        <div id="services">
            <h3>TAkE A LOOK AT <span>OUR SERVICES</span></h3>
            <div class="line"></div>
            <div class="line2"></div>
            <div class="h4a">
                <h4>Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finingibus" (The Extremes of Good and
                    Evil) by Cicero,written in 45 BC. This book is a treatise on the theory of ethics, very popular
                    during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a
                    line in section 1.10.32.</h4>
            </div>
            <div class="services-box">
                <div class="item-a">
                    <div class="item">
                        <div class="item-box">
                            <img src="./images/images/Services1_03.jpg">
                        </div>
                        <h3>WEB DESIGN</h3>
                        <p>The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in
                            section 1.10.32.</p>
                    </div>
                    <div class="item">
                        <div class="item-box">
                            <img src="./images/images/Services2_03.png">
                        </div>
                        <h3>MOBILE APPS</h3>
                        <p>The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in
                            section 1.10.32.</p>
                    </div>
                    <div class="item">
                        <div class="item-box">
                            <img src="./images/images/Services3_03.png">
                        </div>
                        <h3>PHOTOGRAPHY</h3>
                        <p>The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in
                            section 1.10.32.</p>
                    </div>
                    <div class="item">
                        <div class="item-box">
                            <img src="./images/images/Services4_03.png">
                        </div>
                        <h3>MARKETING</h3>
                        <p>The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in
                            section 1.10.32.</p>
                    </div>
                </div>
            </div>

        </div>
        <div id="clients">

            <h3>SOME OF <span>OUR CLIENTS</span></h3>
            <div class="line"></div>
            <div class="line2"></div>
            <div class="swiper clients-swiper">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">
                        <div class="clients-box">
                            <div class="clients-box1">
                                <img src="./images/images/Clients1_03.png">
                            </div>
                            <div class="clients-box1">
                                <img src="./images/images/Clients2_03.png">
                            </div>
                            <div class="clients-box1">
                                <img src="./images/images/Clients3_03.png">
                            </div>
                            <div class="clients-box1">
                                <img src="./images/images/Cilents4_03.png">
                            </div>
                            <div class="clients-box1">
                                <img src="./images/images/Cilents5_03.png">
                            </div>
                        </div>
                    </div>
                    <div class="swiper-slide">
                        <div class="clients-box">
                            <div class="clients-box1">
                                <img src="./images/images/Clients1_03.png">
                            </div>
                            <div class="clients-box1">
                                <img src="./images/images/Clients2_03.png">
                            </div>
                            <div class="clients-box1">
                                <img src="./images/images/Clients3_03.png">
                            </div>
                            <div class="clients-box1">
                                <img src="./images/images/Cilents4_03.png">
                            </div>
                            <div class="clients-box1">
                                <img src="./images/images/Cilents5_03.png">
                            </div>
                        </div>
                    </div>
                    <div class="swiper-slide">
                        <div class="clients-box">
                            <div class="clients-box1">
                                <img src="./images/images/Clients1_03.png">
                            </div>
                            <div class="clients-box1">
                                <img src="./images/images/Clients2_03.png">
                            </div>
                            <div class="clients-box1">
                                <img src="./images/images/Clients3_03.png">
                            </div>
                            <div class="clients-box1">
                                <img src="./images/images/Cilents4_03.png">
                            </div>
                            <div class="clients-box1">
                                <img src="./images/images/Cilents5_03.png">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="swiper-pagination"></div>
            </div>
        </div>
        <div id="work">
            <h3>TAKE A LOOK AT <span>OUR WORK</span></h3>
            <div class="line2"></div>
            <div class="pa">
                <p>Lorem lpsum comes form secitions 1.10.32 and 1.10.33 of "de Finbus Bonorum et Malorum"(The Extremes
                    of Good and Evil)by Cicero,written in 45 BC,This book is a treatise on the theory of ethics ,very
                    popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..",comes
                    from a line in section 1.10.32.</p>
            </div>
            <div class="work-box">
                <div class="work-left">
                    <p>FILTER BY TYPE</p>
                </div>
                <div class="work-right">
                    <div class="r1">
                        <p>All</p>
                    </div>
                    <div class="r2">
                        <p>Web design</p>
                    </div>
                    <div class="r2">
                        <p>Mobile design</p>
                    </div>
                    <div class="r2">
                        <p>Photograpy</p>
                    </div>
                </div>
            </div>

            <div class="work-item">
                <div class="item">
                    <img src="./images/images/avatar.png">
                </div>
                <div class="item">
                    <img src="./images/images/avatar.png">
                </div>
                <div class="item">
                    <img src="./images/images/avatar.png">
                </div>
                <div class="item">
                    <img src="./images/images/avatar.png">
                </div>
                <div class="item">
                    <img src="./images/images/avatar.png">
                </div>
                <div class="item">
                    <img src="./images/images/avatar.png">
                </div>
                <div class="item">
                    <img src="./images/images/avatar.png">
                </div>
                <div class="item">
                    <img src="./images/images/avatar.png">
                </div>
                <div class="item">
                    <img src="./images/images/avatar.png">
                </div>
                <div class="item">
                    <img src="./images/images/avatar.png">
                </div>
                <div class="item">
                    <img src="./images/images/avatar.png">
                </div>
                <div class="item">
                    <img src="./images/images/avatar.png">
                </div>
            </div>
        </div>
        <div id="test">
            <h3><span>OUR CLIENTS'</span>TESTIMONIALS</h3>
            <div class="line"></div>
            <div class="line2"></div>
            <div class="swiper test-swiper">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">
                        <div class="text">
                            BOOK IS A TREATISE ON THE THEORY OF ETHICS, VERY POPULAR DURING THE RENAISSANCE. THE FIRST
                            LINE OF LOREM IPSUM, "LOREM IPSUM DOLOR SIT AMET.", COMES FROM A LINE IN SECTION 1.10.32.
                        </div>
                        <h4><span>Dean Martin,</span>CEO Acme lnc.</h4>
                    </div>
                    <div class="swiper-slide">
                        <div class="text">
                            BOOK IS A TREATISE ON THE THEORY OF ETHICS, VERY POPULAR DURING THE RENAISSANCE. THE FIRST
                            LINE OF LOREM IPSUM, "LOREM IPSUM DOLOR SIT AMET.", COMES FROM A LINE IN SECTION 1.10.32.
                        </div>
                        <h4><span>Dean Martin,</span>CEO Acme lnc.</h4>
                    </div>
                    <div class="swiper-slide">
                        <div class="text">
                            BOOK IS A TREATISE ON THE THEORY OF ETHICS, VERY POPULAR DURING THE RENAISSANCE. THE FIRST
                            LINE OF LOREM IPSUM, "LOREM IPSUM DOLOR SIT AMET.", COMES FROM A LINE IN SECTION 1.10.32.
                        </div>
                        <h4><span>Dean Martin,</span>CEO Acme lnc.</h4>
                    </div>
                </div>
                <div class="swiper-pagination"></div>
            </div>
        </div>
        <div id="feel">

            <h3>FEEL FREE TO <span>CONTACT US</span></h3>
            <div class="line"></div>
            <div class="line2"></div>
            <h5>Lorem lpsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum"
                (TheExtremesofGood and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory
                ofethics,very popularduring the Renaissance.</h5>
            <div class="feel-item">
                <div class="feel-top">
                    <div class="feel-left">
                        <p>Name<span>*</span></p>
                        <div class="texta">
                        </div>
                    </div>
                    <div class="feel-right">
                        <p>Email address<span>*</span></p>
                        <div class="texta">
                        </div>
                    </div>
                </div>
                <div class="feel-center">
                    <p>Message<span>*</span></p>
                    <div class="textb">
                    </div>
                </div>
                <div class="feel-bottom">
                    <div class="send">
                        SEND
                    </div>

                </div>
                </iv>

            </div>




        </div>
        <div id="foot">
            <div class="foot-left">
                <p>ALL RIGHTS RESERVED. COPYRIGHT © 2014 <span>SPIRIT8</span></p>
            </div>
            <div class="foot-right">
                
                <img src="./images/images/logo1_03.png">
               
                
                <img src="./images/images/logo2_03.png">


                <img src="./images/images/logo3_03.png">


                <img src="./images/images/logo4_03.png">


                <img src="./images/images/logo5_03_03.png">

            </div>
        </div>


    </div>













</body>

</html>
<script src="/js/jquery-3.7.1.min.js"></script>
<script src="/js/bootstrap.min.js"></script>
<script src="/js/swiper-bundle.min.js"></script>
<script src="/js/less.min.js"></script>
<script>


    // var demo = document.getElementById('demo');

    // demo.onclick = function()
    // {
    //     console.log(this.innerText)
    // }

    // $('#demo').click(function(){
    //     console.log($(this).text())
    // })

    var teamSwiper = new Swiper('.team-swiper', {
        loop: true, // 循环模式选项

        // 如果需要分页器
        pagination: {
            el: '.swiper-pagination',
            clickable: true,// 开启点击分页器切换
        },

        // 如果需要前进后退按钮
        // navigation: {
        //     nextEl: '.swiper-button-next',
        //     prevEl: '.swiper-button-prev',
        // },
    })
    var clientsSwiper = new Swiper('.clients-swiper', {
        loop: true,
        pagination: {
            el: '.swiper-pagination',
            clickable: true,
        }
    })
    var clientsSwiper = new Swiper('.test-swiper', {
        loop: true,
        pagination: {
            el: '.swiper-pagination',
            clickable: true,
        }
    })



    // 锚点跳转滑动效果
    $('#bs-example-navbar-collapse-1 a[href],#banner a[href],#up a[href]').click(function () {
        // alert(1) // js原生提示框
        // 获取当前url
        // console.log(location.hostname) // 获取主机名
        // console.log(location.pathname.replace(/^\//,''));
        // console.log(this.innerText);
        // a == 1 => 判断值是否相等
        // === => 判断值以及数据类型是否相等 
        if (location.pathname.replace(/^\//, '') === this.pathname.replace(/^\//, '') && location.hostname === this.hostname) {
            //获取将要跳转的锚点位置
            // console.log(this.hash)
            var $target = $(this.hash);
            // console.log($target)

            $target = $target.length && $target || $('[name=' + this.hash.slice(1) + ']');

            // 一定要当他找到锚点元素的时候，才跳转锚点
            if ($target.length) {
                // 获取目标元素的位置
                var targetOffset = $target.offset().top + 10;

                // 让页面的body和html 滚动到 targetOffset这个位置
                $('html,body').animate({
                    scrollTop: targetOffset
                }, 1000);
            }

        }
    })
</script>